<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>滇宏教育-学情分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">所上课程</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-xs9 layui-col-md10 top-panel-number" id="onGoing">

                        </div>

                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">最佳科目</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="bestProject">

                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            The best！
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="englishEvaluate" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="math" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="mathEvaluate" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>


    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="chinese" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="chineseEvaluate" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="physics" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="physicsEvaluate" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>


    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="chemistry" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="chemistryEvaluate" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="biology" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="biologyEvaluate" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>
    <!--<div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div>-->


</div>
<!--</div>-->
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../lib/js/jquery-3.4.1.min.js"></script>
<script>
    //科目最佳
    var scoreData;
    var maxChinese;
    var maxEnglish;
    var maxMath;
    var maxPhysics;
    var maxChemistry;
    var maxBiology;

    //考试次数
  /*  var chiTimes;
    var matTimes;
    var engTimes;
    var phyTimes;
    var cheTimes;
    var bioTimes;*/
    //各科成绩


    $(function () {


        $.ajax({
            url:'../../score/scoreTest',
            success:function (msg) {

                scoreData = msg;


                maxEnglish = Math.max.apply(null, msg.english);
                maxMath = Math.max.apply(null, msg.math);
                maxChinese = Math.max.apply(null, msg.chinese);
                maxPhysics = Math.max.apply(null, msg.physics);
                maxChemistry = Math.max.apply(null, msg.chemistry);
                maxBiology = Math.max.apply(null, msg.biology);
                $('#bestProject').append('<h2>'+msg.bestProject+'</h2>')
                $('#englishEvaluate').append('<h2>您的英语一共考过'+msg.timesMap.englishTimes+'次，最佳成绩为'+getNumber(maxEnglish)+'分，再接再厉！</h2>');
                $('#mathEvaluate').append('<h2>您的数学一共考过'+msg.timesMap.mathTimes+'次，最佳成绩为'+getNumber(maxMath)+'分，再接再厉！</h2>');
                $('#chineseEvaluate').append('<h2>您的语文一共考过'+msg.timesMap.chineseTimes+'次，最佳成绩为'+getNumber(maxChinese)+'分，再接再厉！</h2>');
                $('#biologyEvaluate').append('<h2>您的生物一共考过'+msg.timesMap.biologyTimes+'次，最佳成绩为'+getNumber(maxBiology)+'分，再接再厉！</h2>');
                $('#chemistryEvaluate').append('<h2>您的化学一共考过'+msg.timesMap.chemistryTimes+'次，最佳成绩为'+getNumber(maxChemistry)+'分，再接再厉！</h2>');
               $('#physicsEvaluate').append('<h2>您的物理一共考过'+msg.timesMap.physicsTimes+'次，最佳成绩为'+getNumber(maxPhysics)+'分，再接再厉！</h2>');
                $('#totalProject').append(scoreData.totalProjects+'门');
                $('#onGoing').append(scoreData.onGoing);
            },
            error:function () {
                alert('无法查询');
            }
        })

        layui.use(['layer', 'echarts'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                echarts = layui.echarts;

            /**
             * 报表功能
             */
            var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

            var optionRecords = {
                title: {
                    text: '指标名称-英语'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['英语']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: scoreData.englnames
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '英语',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: scoreData.english
                    },

                ]
            };
            echartsRecords.setOption(optionRecords);


            var echartsRecords = echarts.init(document.getElementById('math'), 'walden');

            var math = {
                title: {
                    text: '指标名称-数学'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: 'green'
                        }
                    }
                },
                legend: {
                    data: ['数学']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: scoreData.matnames
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数学',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: scoreData.math
                    },

                ]
            };
            echartsRecords.setOption(math);





            var echartsRecords = echarts.init(document.getElementById('chinese'), 'walden');

            var chinese = {
                title: {
                    text: '指标名称-语文'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: 'green'
                        }
                    }
                },
                legend: {
                    data: ['语文']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: scoreData.chinames
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '语文',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: scoreData.chinese
                    },

                ]
            };
            echartsRecords.setOption(chinese);



            var echartsRecords = echarts.init(document.getElementById('biology'), 'walden');

            var biology = {
                title: {
                    text: '指标名称-生物'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: 'green'
                        }
                    }
                },
                legend: {
                    data: ['生物']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: scoreData.bionames
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '生物',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: scoreData.biology
                    },

                ]
            };
            echartsRecords.setOption(biology);






            var echartsRecords = echarts.init(document.getElementById('chemistry'), 'walden');

            var chemistry = {
                title: {
                    text: '指标名称-化学'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: 'green'
                        }
                    }
                },
                legend: {
                    data: ['化学']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: scoreData.chenames
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '化学',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: scoreData.chemistry
                    },

                ]
            };
            echartsRecords.setOption(chemistry);




            var echartsRecords = echarts.init(document.getElementById('physics'), 'walden');

            var physics = {
                title: {
                    text: '指标名称-物理'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: 'green'
                        }
                    }
                },
                legend: {
                    data: ['物理']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: scoreData.phynames
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '物理',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: scoreData.physics
                    },

                ]
            };
            echartsRecords.setOption(physics);





















            /**
             * 玫瑰图表
             */
            var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
            var optionPies = {
                title: {
                    text: '指标名称-玫瑰图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: scoreData.englnames
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        roseType: 'radius',
                        data: [
                            {value: 335, name: '直接访问'},
                            {value: 310, name: '邮件营销'},
                            {value: 234, name: '联盟广告'},
                            {value: 135, name: '视频广告'},
                            {value: 368, name: '搜索引擎'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            echartsPies.setOption(optionPies);


            /**
             * 柱状图
             */
            var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');

            var optionDataset = {
                legend: {},
                tooltip: {},
                dataset: {
                    dimensions: ['product', '2015', '2016', '2017'],
                    source: [
                        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'}
                ]
            };

            echartsDataset.setOption(optionDataset);


            /**
             * 中国地图
             */
            var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');


            var optionMap = {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: [
                        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                        ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                        ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {gridIndex: 0},
                grid: {top: '55%'},
                series: [
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'
                        },
                        encode: {
                            itemName: 'product',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            };

            echartsMap.setOption(optionMap);


            // echarts 窗口缩放自适应
            window.onresize = function () {
                echartsRecords.resize();
            }

        });
    })

    function getNumber(times) {
        if(times == -Infinity){
            return 0;
        }else{
            return times;
        }
    }

</script>
</body>
</html>
